<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body style="background: transparent">
<div class="d-flex flex-row" style="height: 100vh">
  <div class="left-plan d-flex flex-column p-1 pb-0">
    <div class="ncard m-1">
      <div>站点选择</div>
      <div style="width: 240px" class="p-1">
        <div class="m-1 btn btn-primary d-block"><i class="fa fa-home"></i> 武清 站</div>
        <div class="m-1 btn btn-primary d-block"><i class="fa fa-home"></i> 密云1站</div>
        <div class="m-1 btn btn-primary d-block"><i class="fa fa-home"></i> 密云2站</div>
      </div>
    </div>
    <div class="ncard m-1 flex-grow-1 d-flex flex-column mb-0">
      <div>载荷选择</div>
      <div class="flex-grow-1 d-flex flex-column p-1">
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 快视软件包</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 中视场彩色相机</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 热辐射光谱仪</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 可见红外成像光谱仪</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 多光谱相机</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 探测雷达</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 磁强计</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 带电粒子与中性粒子分析仪</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 喷发物分析仪-尘埃分析仪</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 喷发物分析仪-显微相机</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 喷发物分析仪-挥发分分析仪</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 窄视场导航敏感器</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 激光一体化导航敏感器</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 旋转衍射高光谱相机</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 宽视场导航敏感器</div>
        <div class="m-1 btn btn-sm btn-primary d-block text-start"><i class="fa fa-cubes"></i> 遥测</div>
      </div>
    </div>
  </div>
  <div class="d-flex flex-column flex-grow-1">
    <div style="height: 38px">
      <button class="btn btn-primary btn-sm"><i class="fa fa-clock-o"></i> 实时快视</button>
      <button class="btn btn-info btn-sm"><i class="fa fa-history"></i> 历史回放</button>
    </div>
    <iframe name="viewer" class="d-block flex-grow-1 me-2" style="  border: 1px solid #08f" src="qv.html"></iframe>
  </div>
</div>

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="qv/qv.css">
</body>
</html>